<style type="text/css">
		*{
			padding: 0;margin: 0;
		}
		@media all and (min-width: 701px){
		#tb{/*图标*/
			
			line-height: 50px;
			text-align: center;
			position: fixed;
			left: 20px;
			top: 0px;
			height: 40px;
			z-index: 80;
			font-family: 本墨锵黑;
			font-size: 30px;



		}
		#tb1{
			
			line-height: 50px;
			text-align: center;
			position: fixed;
			left: 125px;
			top: -10px;
			
			height: 40px;
			z-index: 90;
			font-family: 本墨锵黑;
			font-size: 30px;
		}
		a{
        	color: white;
        	text-decoration: none;
        }
        nav {
			width:100%;
			height: 40px;
			z-index: 20;
			font-family:本墨锵黑;
			font-size: 20px;
			font-color: white;
			text-align: center;
			position: fixed;
			top:0;
			padding-top: 5px;
			background-image: url('images/背景.jpg');
			
			}
			nav:hover{
				height: 200px;
			}

		li {
			text-align: center;
			display: inline-block;
			line-height: 40px;
			width: 150px;
			height: 35px;
			

		}
		#menu>li {
			display: inline-block;
			position: relative;
			min-width: 150px;
		}

		li:hover {
			background-color: gray;
			border-radius: 15px;
		}
		#sub {
			display: none;
			position: absolute;
			font-size: 15px;
		}
		nav:hover #sub {
			display: block;
		}
		a{
        	color: white;
        }

		
		
		

        


        


        

#dl{
	background-color: rgb(102, 255, 204);
	border-radius: 40px;
	position: fixed;
	text-align: center;
	line-height: 50px;
	width: 150px;
	height: 40px;
	top: 0px;
	right: 0px;
	z-index: 60;
	font-family: 本墨锵黑;
	font-size: 20px;
}

#dl a:hover{
	color: gray;
}

        #img{
			width: 100%;
        	position: fixed;
        	 z-index: -1;
        	 top: 0px;
        	 
        	 
        }



		#img1{
			width: 100%;
			position: fixed;
        	 z-index: 1;
        	 top: 0px;
        	 transition: all 1s linear;
        	 opacity: 0;

        	 
		}

		#img1:hover{
			opacity: 1;



		}


        .all1{
        	background-image: white;
        	z-index: 2;
        	margin: 0 auto;
        	position: absolute;
        	top: 150px;
        	left: 180px;
			}

        .all1 p{
 	font-size:15px;

		 }	
		

 

 		rt{
 		font-size: 15px;
 	}


#fx{
	position: fixed;
 		
 		line-height: 40px;
		padding-left: 4px;
 		width: 50px;
 		height: 260px;
 		z-index: 5;
 		top:240px;
 		right: 325px;
 		transition: all 2s linear;
 		
}
#fx img:hover{
transform: scale(1.2)
}


 	#toutiao{
 		position: absolute;
 		text-align: center;
 		line-height: 50px;
 		width: 170px;
 		height: 50px;
 		z-index: 3;
 		top:75px;
 		left: 190px;
 		font-family: 本墨锵黑;
 		font-size: 35px;
 		border-radius: 40px;
 		

 	}

 	#toutiao:hover{
 		transform: scale(1.2);



 	}



@font-face {
  font-family: 'norwester';   /*字体名称*/
  src: url('字体/norwester.ttf');  
       /*字体源文件*/
    }
    @font-face {
  font-family: '本墨锵黑';   /*字体名称*/
  src: url('字体/本墨锵黑.ttf');  
       /*字体源文件*/
    }
    @font-face {
  font-family: '液晶体';   /*字体名称*/
  src: url('字体/LiquidCrystal-Bold.otf');  
       /*字体源文件*/
    }
    @font-face {
  font-family: '英文写信字体';   /*字体名称*/
  src: url('字体/ldpretty.ttf');  
       /*字体源文件*/
    }



#hangban{
 		padding-left: 60px;
		width: 800px;
		height: 100px;
		background-color: rgb(102, 255, 204);
		border-radius: 40px;
		position: absolute;
		top: 590px;
		left: 180px;
		line-height: 90px;
		opacity: 0.7;
		z-index: 2;		


 }

 #hangban1{
height: 0;
width: 380px;
position: absolute;
left: 455px;
top: 0px;


border-bottom: 100px solid white;
border-left: 60px solid transparent;
border-top-right-radius: 40px;

}

#hangban2{
	
	width: 450px;
		height: 100px;
		background-color: white;
		border-radius: 40px;
		position: absolute;
		top: 0px;
		left: 500px;

		

}

#hangban3{
	
	width:380px;
		height: 80px;
		border-radius: 40px;
		z-index: 5;
		position: absolute;
		padding-left: 260px;
		padding-top: 30px;
		top:580px;
		left: 520px;
		z-index: 3;
		opacity: 0;
		transition: all 1.3s linear;
		animation-name: plane1;
		animation-duration:  2s;/*动画时间，移动要有，否则默认为0*/
		animation-iteration-count: 2;/*循环次数，无限次的值为infinite*/
		animation-direction: alternate ;/*返回动画*/

		

}
@keyframes plane1{
from {
	opacity: 0;
	transform: translate(0,0) 
}
 to{
 	opacity: 1;
	transform:   translate(220px,-50px) scale(1.4) 
}
}


#hangban3:hover{
opacity: 1;
	-webkit-transition: transform 2s;
    -o-transition: transform 50s;
    
    transform: translate(220px,-50px) scale(1.2);
    
}



#hangban4{
	
		width: 130px;
		height:120px;
		position: absolute;
		top:560px;
		left: 880px;
		z-index: 2;
		

}
#hangbanT1{
 	
 	position: absolute;
 	width: 200px;
 	height: 56px;
 	font-family: 本墨锵黑;
 	font-size: 40px;
 	line-height: 72px;
 	text-align: center;
 	
 	top: 600px;
	left: 250px;
	z-index: 3;
	transition: all 1s;
 }    
 
     #hangbanT1 a:hover{
 	font-size: 1.5em;

 }
 #hangbanT2{
 	
 	position: absolute;
 	width: 200px;
 	height: 40px;
 	text-align: center;
 	font-family:norwester;
 	font-size:18px;
 	top: 655px;
	left: 250px;
	z-index: 3;
	transition: all 1s;
 }    
 
     #hangbanT2 a:hover{
 	font-size: 1.5em;

 }
 #hangbanA{
 	position: absolute;
 	background-color: white;
 	width: 950px;
 	height: 360px;
 	top: 710px;
 	left: 180px;
 	opacity: 0.8;
 	border-radius: 40px;
 	z-index: 5;


 }
 #time{
 	position: absolute;
 	background-color: black;
 	width: 200px;
 	height: 200px;
 	top: 730px;
 	left: 400px;
 	border-radius: 40px;
 	z-index: 5;
 	font-size: 20px;
 }

 
 #clock {
 	background-color: black;
 	height: 80px;
 	width: 200px;
 	padding-top: 20px;
 	text-align: center;
 	line-height: 20px;
 	z-index: 10;
 	border-radius: 30px;
 	border-bottom-right-radius: 0px; 
 	border-top-left-radius: 0px;
 	font-family: 液晶体;
  text-align: center;
  position: absolute;
  left: 1030px;
  top: 760px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
  letter-spacing: 0.05em;
  font-size: 25px;
  padding: 5px 0;
}
 





























 #dujiaxing{
 	
 	position: absolute;
 	width: 200px;
 	height: 56px;
 	font-family: 本墨锵黑;
 	font-size: 40px;
 	line-height: 72px;
 	text-align: center;
 	
 	top: 1100px;
	left: 250px;
	z-index: 3;
	transition: all 1s;
 }    
 
     #dujiaxing a:hover{
 	font-size: 1.5em;

 }
 a{
 	text-decoration: none;
 }    

 #dujiaxing0{
 	
 	position: absolute;
 	width: 200px;
 	height: 40px;
 	text-align: center;
 	font-family:norwester;
 	font-size:18px;
 	top: 1155px;
	left: 250px;
	z-index: 3;
	transition: all 1s;
 }    
 
     #dujiaxing0 a:hover{
 	font-size: 1.5em;

 }
 a{
 	text-decoration: none;
 }
 
 
 
 
 #dujiaxing1{
 	padding-left: 60px;
		width: 800px;
		height: 100px;
		background-color: rgb(102, 255, 204);
		border-radius: 40px;
		position: absolute;
		top: 1090px;
		left: 180px;
		line-height: 90px;
		opacity: 0.7;
		z-index: 2;		


 }
 

 
 #dujiaxing2{
height: 0;
width: 380px;
position: absolute;
left: 455px;
top: 0px;


border-bottom: 100px solid white;
border-left: 60px solid transparent;
border-top-right-radius: 40px;

} 
#dujiaxing3{
	
	width: 450px;
		height: 100px;
		background-color: white;
		border-radius: 40px;
		position: absolute;
		top: 0px;
		left: 500px;

		

}
#dujiaxing4{
	
	width:380px;
		height: 80px;
		border-radius: 40px;
		z-index: 5;
		position: absolute;
		padding-left: 260px;
		padding-top: 30px;
		top:1090px;
		left: 520px;
		z-index: 3;
		transition: all 1.3s linear;
		animation-name: plane2;
		animation-duration:  1.3s;/*动画时间，移动要有，否则默认为0*/
		animation-iteration-count: 2;/*循环次数，无限次的值为infinite*/
		animation-direction: alternate ;/*返回动画*/

		

}
@keyframes plane2{
from {
	transform: translate(0,0)
}
to {
	transform:   translate(220px,-50px) scale(1.2);
}
}


#dujiaxing4:hover{

	-webkit-transition: transform 1.3s;
    -o-transition: transform 50s;
    animation-delay: 2s;
    transform: translate(220px,-50px) scale(1.2);
    
}



#dujiaxing5{
	
	width: 130px;
		height:120px;
		position: absolute;
		top:1060px;
		left: 880px;
		z-index: 2;
		transition: all 1.5s;

		

}
#dujiaxingA{
 	padding-left: 60px;
		width: 890px;
		height: 1210px;
		background-color: white;
		border-radius: 40px;
		position: absolute;
		top: 1210px;
		left: 180px;
		
		opacity: 0.8;
		z-index: 2;		


 }
 #dujiaxingB{
 	padding-top: 100px;
 	padding-left: 60px;
		width: 890px;
		height: 1000px;
		
		border-radius: 40px;
		position: absolute;
		top: 1350px;
		left: 124px;
		z-index: 2;		


 }
#dujiaxingT1{/*排行榜*/
 	 
 	position: absolute;
 	width: 200px;
 	height: 60px;
 	font-family: 本墨锵黑;
 	font-size: 40px;
 	line-height: 72px;
 	text-align: center;
 	
 	top: 1220px;
	left: 180px;
	z-index: 10;
	transition: all 1s;
 }    
 
     #dujiaxingT1 a:hover{
 	font-size: 1.5em;

 }

 #dujiaxingT2{/*星旅网*/
 	
 	position: absolute;
 	width: 230px;
 	height: 20px;
 	font-family: 本墨锵黑;
 	font-size: 20px;
 	text-align: center;
 	
 	top: 1250px;
	left: 900px;
	z-index: 10;
	
 }    
 
     #dujiaxingT2 a:hover{
 	color: black;

 }
#dujiaxingT3{/*横线*/
	z-index: 10;
position: absolute;
width: 950px;
height: 3px;
top: 1270px;
left: 180px;
background-color: rgb(102, 255, 204);
}

#dujiaxingT4{/*排名1*/
z-index: 15;
position: absolute;
padding-top: 50px;
text-align: center;
width: 200px;
height: 50px;
top: 1320px;
left: 180px;

font-size: 70px;
font-family: 本墨锵黑;
}

#dujiaxingT5{
	z-index: 15;
position: absolute;
border-radius: 40px;
background-image: url('侏罗纪世界/0.jpg');
width: 400px;

height: 130px;
top: 1300px;
left: 450px;
}
#dujiaxingT5:hover{
	transform: scale(1.2);
}


#dujiaxingT6{
	z-index: 10;
	position: absolute;
	padding-top: 54px;
	line-height: 30px;
	text-align: center;
	width: 200px;
	height: 90px;
	top: 1300px;
	left: 900px;
	text-align: center;
	font-family: 本墨锵黑;


}



#dujiaxingT7{
	

	z-index: 10;
	position: absolute;
	width: 200px;
	height: 40px;
	top: 1445px;
	left: 925px;
	text-align: center;
	font-family: 本墨锵黑;
	
}
#dujiaxingT7 img:hover{
	transform: scale(1.3);
}

#dujiaxingT8{
	z-index: 10;
	background-color: white;
	padding-top: 6px;
	padding-left: 15px;
	
	position: absolute;
	width: 300px;
	height: 50px;
	top: 1845px;
	left: 180px;
	font-size: 20px;
	font-family: 本墨锵黑;
	
}

#dujiaxingT8:hover{
border-radius: 40px;
background-color: rgb(102, 255, 204);
color: white;
transition: all 0.3s linear;
}

#dujiaxingT8 a{
color: black;
}
#dujiaxingT8:hover a{
color: white;
transition: all 0.3s linear;
}



#left{
	background-image: url('images/飞船3left.jpg');
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	position: fixed;
	width: 60px;
	height: 400px;
	top: 150px;
	left: 0px;
	z-index: 40;
	font-size: 35px;
	transition: 0.5s linear;
	
	
}
#left:hover{
width: 50%;

}
#left a:hover{
	color: rgb(204, 204, 255);

}


#left1{
	
	line-height: 40px;
	text-align: center;
	position: absolute;
	width: 50px;
	height: 310px;
	top: 35px;
	left: 5px;
	font-family: 本墨锵黑;
	transition:all 0.8s linear; 
	
	
}
#left2{
	
	position: fixed;
	z-index:42; 
	top: 480px;
	left: 16px;
}
#left2:hover{
	transform: scale(1.2);
}


#bq{
	margin: 0 auto;
	position: relative;
	background-color: rgb(102, 255, 204);
	padding-top: 20px;
	top: 2420px;
	width: 100%;
	height: 350px;
	font-family: 本墨锵黑;
	text-align: center;
	z-index: 5;

}
#bq1{
	background-image: url('images/背景.jpg');
	position: relative;
	top: 30px;
	left: 400px;
	width: 180px;
	height: 60px;
	font-family: 本墨锵黑;
	font-size: 25px;
	text-align: center;
	line-height: 65px;
	transition: 0.5s linear;
	z-index: 5;

}

#bq1:hover{
	transform: scale(1.2);
	
	border-radius: 40px;
}
#bq2{
	background-image: url('images/背景.jpg');
	position: relative;
	top: -30px;
	left: 670px;
	width: 180px;
	height: 60px;
	font-family: 本墨锵黑;
	font-size: 25px;
	text-align: center;
	line-height: 65px;
	transition: 0.3s linear;
	z-index: 5;
}

#bq2:hover{
	transform: scale(1.2);
	
	border-radius: 40px;
}
#bq3{
	background-image: url('images/背景.jpg');
	position: relative;
	top: -90px;
	left: 940px;
	width: 180px;
	height: 60px;
	font-family: 本墨锵黑;
	font-size: 25px;
	text-align: center;
	line-height: 65px;
	transition: 0.3s linear;
	z-index: 5;
}

#bq3:hover{
	transform: scale(1.2);
	
	border-radius: 40px;
}
#bq0{
	margin: 0 auto;
	
	position: relative;
	top: 20px;
	width: 1200px;
	height: 100px;
	font-family: 本墨锵黑;
	font-size: 25px;
	text-align: center;
	z-index: 5;
}

#bqg{
	background-image: url('images/背景.jpg');
	position: relative;
	left: 1338px;
	top: -328px;
	height: 60px;
	width: 180px;
	font-family: 本墨锵黑;
	line-height: 65px;
	font-size: 30px;
	text-align: center;
	transition: 0.3s linear;
	z-index: 5;
}

#bqg:hover{
	border-radius: 40px;
}

#yc{

}

#yc1{
	display: none;
}


}








/*………………………………………………………………………………………………………………响应式………………………………………………………………………………………………………………*/



























@media all and (max-width: 700px){
	#yc{
		display: none;
	}

			* {
				padding: 0;
				margin: 0;
				
			}
			a{
			color: white;
			text-decoration: none;
			}
			nav {
				z-index: 20;
				position: fixed;
				width: 100px;
				min-height: 40px;
				line-height: 40px;
				text-align: center;
				background-image: url('images/背景.jpg');
				font-family:本墨锵黑;
				font-size: 15px;
			}

			li {
				list-style-type: none;
				min-width: 100px;

			}

			#menu>li {
				display: none;
				position: relative;
			}

			nav:hover #menu>li {
				display: block;

			}

			li:hover {
				background-color: gray;
				border-radius: 5px;
			}

			#sub {
				display: none;
				background-image: url('images/背景.jpg');
			}

			#mm:hover #sub {
				margin-left:100%;
				top:0px;
				display: block;
				position: absolute;
			}

			.line {
	            width: 70px;
	            height: 40px;
	            background: gray;
	            padding: 20px 0 0px 30px;
	            position: relative;
	            opacity: 0.7;
	            cursor: pointer;
	        }

	        .line div {
	            display: block;
	            width: 50px;
	            height: 5px;
	            background: #fff;
	            position: absolute;
	            border-radius: 10px 0 0 10px;
	        }

	        .line .one {
	            width: 40px;
	            top:15px;

	        }

	        .line:hover .one {
	        	transform: rotate(-30deg);
	        }

	        .line .two {
	            width: 40px;
	            top:30px;
	        }

	        .line .three {
	            width: 40px;
	            top:45px;
	        }

	         .line:hover .three {
	        	transform: rotate(30deg);
	        }
		
		#su/*搜索*/
		{	
			z-index: 9;
			position: fixed;
			top: 0;
			width: 100%;
			height: 60px;
			background: black;
			opacity: 0.7;
		}
		#su1{/*按钮搜索*/
			z-index: 10;
			position: relative;
			width: 40px;
			background-color: red;
			border-radius: 40px;
			left:223px;
			top: -22px;
			font-family:本墨锵黑;
		}
		
		#su1:hover{
			background-color: red;
		}
	
	#su3{/*搜索框*/
		background-color: black;
		position: relative;
		top: 8px;
		left: 0px;
		width: 220px;



		}
		#su4/*图标和输入框*/{
			
			width: 260px;
			z-index: 20;
			position: relative;
			top: 10px;
			margin: 0 auto;
			height: 50px;

			

			

		}
		#tp1/*23世纪图片*/{
			
			position: absolute;
			overflow: hidden;
			top: 60px;
			width: 100%;
			height: 400px;
			
		}
		#tp1 img:hover{
			cursor: pointer;
			transform: scale(1.3);
			transition: all 3s linear;	
		}
		#tp11/*文字*/{
			text-align: center;
			z-index: 1;
			position: relative;
			top: 70px;
			margin: 0 auto;
			width: 250px;
			min-width: 250px;
			font-family:本墨锵黑;
			font-size: 25px;


		}
		#tp12/*查看专题*/{
			position: relative;
			background-color: gray;
			top: 80px;
			margin: 0 auto;
			height: 35px;
			width: 100px;
			transition: 1s;
			text-align: center;
			line-height: 38px;
			border-radius: 40px;
			font-family:本墨锵黑;
			font-size: 16px;
		}
		#tp12:hover{
			background-color: rgb(102, 255, 204);

		}
		

	#tp2/*第二张图片*/{
		background-color: red;
			position: absolute;
			overflow: hidden;
			top: 470px;
			width: 100%;
			height: 400px;
			
	}
	#tp2 img:hover{
			cursor: pointer;
			transform: scale(1.3);
			transition: all 3s linear;	
		}
		#tp21/*文字*/{
			
			z-index: 1;
			text-align: center;
			position: relative;
			top: 400px;
			margin: 0 auto;
			width: 380px;
			min-width: 380px;
			font-family:本墨锵黑;
			font-size: 25px;
		}
		#tp22{/*查看专题*/
			position: relative;
			background-color: gray;
			top: 410px;
			margin: 0 auto;
			height: 35px;
			width: 100px;
			transition: 1s;
			text-align: center;
			line-height: 38px;
			border-radius: 40px;
			font-family:本墨锵黑;
			font-size: 16px;
		}
		#tp22:hover{
			background-color: rgb(102, 255, 204);

		}
		#tp3/*22世纪英雄图片*/{
			
			position: absolute;
			overflow: hidden;
			top: 880px;
			width: 100%;
			height: 400px;
			transition: 1s;
					}

		

		#tp31/*文字*/{
			
			z-index: 1;
			text-align: center;
			position: relative;
			top: 750px;
			margin: 0 auto;
			width: 380px;
			min-width: 380px;
			font-family:本墨锵黑;
			font-size: 25px;

		}
		#tp32/*播放按钮*/{
			z-index: 1;
			
			position: relative;
			top: 770px;
			margin: 0 auto;
			width: 100px;
			height: 100px;
			min-width: 100px;
		}
		#tp32 img:hover{
			cursor: pointer;
			transform: scale(1.2);
			transition: all 1s;	
		}

		#yc1{/*隐藏手机端*/

		}
		#yc{/*隐藏pc端*/
			display: none;
		}

}
</style>






























